<template>
  <div id="adminNotice">
    <!-- 用户列表导航 -->
    <template>
      <div class="admin-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>公告管理</el-breadcrumb-item>
          <el-breadcrumb-item>管理员公告管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>

    <!--视图 -->
    <el-card>
      <template>
        <el-row>
          <!-- 搜索信息 start-->
          <el-col :span="2">查询公告信息:</el-col>
          <!-- 搜索框-->
          <el-col :span="4">
            <el-input v-model="noticeId" class="selectNotice" placeholder="请输入公告ID"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button size="medium" type="primary" @click="selectNoticeById()">查询</el-button>
          </el-col>
          <!-- 搜索信息 end-->
          <!-- 添加公告 start-->
          <el-col :span="2" :offset="13" class="noticeBtn">
            <el-button size="medium" type="primary" @click=" dialogFormVisible = true">添加</el-button>
          </el-col>
          <!-- 添加公告 end-->
        </el-row>
      </template>
      <!-- 公告详细信息 start-->
      <template>
        <div class="admin-table">
          <el-table :data="tableData">
            <el-table-column prop="adminNoticeId" label="公告编号" width="100"></el-table-column>
            <el-table-column prop="adminId" label="管理员编号"></el-table-column>
            <el-table-column prop="title" label="公告标题"></el-table-column>
            <el-table-column prop="content" label="公告内容">
              <template scope="scope">
                <el-button type="text" @click="open(scope.row.content)">{{scope.row.content}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="公告发表时间"></el-table-column>
            <el-table-column prop="updateTime" label="公告修改时间"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  size="medium"
                  type="primary"
                  @click="deleteNotice(scope.row.adminNoticeId)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 公告详细信息 end-->
        </div>
        <!-- 分页区域 start-->
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="skipPage"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
        ></el-pagination>
        <!-- 分页区域 end-->
      </template>
    </el-card>

    <!-- 添加公告弹出框 -->
    <el-dialog title="添加公告" :visible.sync=" dialogFormVisible" width="30%" center>
      <el-form :model="addNoticeForm" :rules="rules" ref="addNoticeForm">
        <el-form-item label="公告标题" :label-width="formLabelWidth" prop="title">
          <el-input type="text" v-model="addNoticeForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" :label-width="formLabelWidth" prop="content">
          <el-input type="textarea" v-model="addNoticeForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNotice()">添加</el-button>
      </div>
    </el-dialog>
    <!-- 添加公告弹出框end -->
    <!-- 修改公告弹出框 -->
    <el-dialog title="修改公告" :visible.sync=" dialogFormVisible1" width="30%" center>
      <el-form :model="changeNoticeForm" :rules="rules" ref="changeNoticeForm">
        <el-form-item label="公告标题" :label-width="formLabelWidth" prop="title">
          <el-input type="text" v-model="changeNoticeForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" :label-width="formLabelWidth" prop="content">
          <el-input type="textarea" v-model="changeNoticeForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateNotice()">修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改公告弹出框end -->
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      noticeId: "",
      dialogFormVisible: false,
      formLabelWidth: "100px",
      // 添加公告表单
      addNoticeForm: {
        title: "",
        content: ""
      },
      rules: {
        title: [
          { required: true, message: "公告标题不能为空", trigger: "blur" }
        ],
        content: [
          { required: true, message: "公告内容不能为空", trigger: "blur" }
        ]
      },
      // 表格数据
      tableData: [],
      total: 0,
      pages: 0,
      pageSize: 8,
      currentPage: 1,
      // 表格数据end

      validateField: "",
      // 添加公告模态框end
      // 修改模态框
      dialogFormVisible1: false,
      currentIndex: "",
      changeNoticeForm: {
        adminNoticeId: "",
        title: "",
        content: ""
      }
      // 修改模态框end
    };
  },
  created() {
    this.selectNotice();
  },
  methods: {
    // axios请求数据
    // 根据页码跳转
    skipPage: function(currentPage) {
      this.currentPage = currentPage;
      this.$get(
        this.$urlPath.notice +
          "/notice/noticeAdmins/" +
          currentPage +
          "/" +
          this.pageSize
      )
        .then(resp => {
          if (resp.code == 200) {
            this.tableData = resp.data.list;
            //  this.pages = resp.data.data.list.pages
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加公告
    addNotice() {
      this.$post_json(
        this.$urlPath.notice + "/notice/noticeAdmin/add",
        this.addNoticeForm
      )
        .then(resp => {
          if (resp.code == 200) {
            this.dialogFormVisible = false;
            this.$message({
              message: "添加成功",
              type: "success"
            });
            // location.reload();
            this.reload();
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加公告end
    // 查询公告数据
    selectNotice() {
      this.$get(
        this.$urlPath.notice +
          "/notice/noticeAdmins/" +
          this.currentPage +
          "/" +
          this.pageSize
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data.list == null) {
              this.tableData = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.tableData = resp.data.list;
              this.total = resp.data.total;
              this.pageSize = resp.data.pageSize;
            }
          } else {
            return this.$message.error(resp.message);
          }

          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询公告数据end
    // 修改公告
    updateNotice() {
      this.$put_json(
        this.$urlPath.notice + "/notice/noticeAdmin/update",
        this.changeNoticeForm
      )
        .then(resp => {
          if (resp.code == 200) {
            this.dialogFormVisible1 = false;
            this.$message({
              message: "修改成功",
              type: "success"
            });
            // location.reload();
            this.reload();
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },

    handleEdit(index, row) {
      // 将数据的index传递过来用于实现数据的回显
      this.changeNoticeForm = this.tableData[index];
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisible1 = true;
    },
    // 修改公告end
    // 删除公告
    deleteNotice(id) {
      this.$deletes_json(
        this.$urlPath.notice + "/notice/noticeAdmin/delete/" + id
      )
        .then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            location.reload();
          } else {
            return this.$message.error(resp.message);
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除公告end
    // 根据公告ID查询公告
    selectNoticeById() {
      this.$get(this.$urlPath.notice + "/notice/noticeAdmin/" + this.noticeId)
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data == null) {
              this.tableData = null;
              this.$message({
                message: "没有该公告",
                type: "error"
              });
            } else {
              this.tableData = [resp.data];
              this.total = 1;
              this.pageSize = 1;
            }
          } else {
            return this.$message.error(resp.message);
          }

          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 根据公告ID查询公告end
    // 请求数据end
    open(content) {
      this.$alert(content, "详情", {
        confirmButtonText: "确定"
      });
      // alert(content);
    }
  }
};
</script>


<style lang="less" >
@import "../../assets/less/adminNotice.less";
.el-tooltip__popper {
  max-width: 400px;
}
</style>